<template>
    <div class="article">
        <Nav :title="title" :path="path"></Nav>
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="item of article" :key="item._id">
                <img class="bg" v-lazy="item.imgSrc" />
            </van-swipe-item>
        </van-swipe>
        <div class="container" v-for="item of article" :key="item._id">
            <div class="user">
                <img :src="item.avatar" alt="">
                <span>{{item.date}}</span>
            </div>
            <p class="user-title">{{item.title}}</p>
            <img class="img" :src="item.imgSrc" alt="" @click="handleDetail(item._id)">
            <div class="detail">
                <div class="content">{{item.detail}}</div>  
               <div class="comment">
                <img class="icon" src="@/assets/images/icon/chat1.png" alt="">
                <div class="num">{{item.collectNum}}</div>
                <img class="icon" src="@/assets/images/icon/view.png" alt="">
                <div class="num">{{item.reading}}</div>
                <img class="collect" :src="item.collected?collected:collectBefore">
               </div>
               
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'Article',
        data() {
            return {
                title:'文与字',
                path:'/',
                article:[],
                collected:require('@/assets/images/icon/collection.png'),
                collectBefore:require('@/assets/images/icon/collection-anti.png'),
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData(){
                this.$http.get('/article').then(res=>{
                    this.article = res.data.res
                })
            },
            handleDetail(id){
                this.$router.push({path:'/tabbar/articleDetail',query:{id}})
            }
        }
    }
</script>

<style scoped>
.article{
    background-color: #eee;
    margin-top: 90px;
}
.bg{
    width: 100%;
    height: 400px;
}
.container{
    border:1px solid #eee;
    margin-top: 50px;
    background-color: white;
}
.user{
    position: relative;
    margin: 10px;
}
.user img{
    width: 80px;
    margin-right: 20px;
}
.user span{
    position: absolute;
    font-size: 29px;
    color: #666;
    top: 35%;
}
.user-title{
    font-size: 28px;
    font-weight: bold;
    margin: 20px;
}
.img{
    width: 100%;
}
.detail{
    padding:20px;
}
.content{
    width: 100%;
    font-size: 22px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    letter-spacing: 3px;
    margin-bottom: 20px;
}
.comment{
    display: flex;
}
.icon{
    width: 40px;
    margin-right: 10px;
}
.num{
    font-size: 30px;
    line-height: 40px;
    color: #666;
    margin-right: 40px;
}
</style>